<template>
  <div class="home-container">
    <h1>Vue3 组件库演示</h1>
    <p>这是一个基于 Vue 3 + TypeScript + Vite 构建的组件库演示项目</p>
    
    <div class="feature-cards">
      <FeatureCard 
        v-for="feature in features"
        :key="feature.title"
        :title="feature.title"
        :description="feature.description"
        :icon="feature.icon"
        @click="handleFeatureClick(feature.path)" 
      />
      
      <FeatureCard 
        title="弹框组件" 
        description="弹框使用方式"
        icon="🎨"
        @click="showDialog = true" 
      />
    </div>
  </div>

  <CustomDialog v-model="showDialog" title="删除确认" dialogWidth="400px" :showMask="true" @confirm="handleConfirmDelete"
    @cancel="handleCancel">
    <p>确定要删除这条数据吗？删除后不可恢复！</p>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CustomDialog from '@/components/commons/dialog/index.vue';
import FeatureCard from '@/components/commons/FeatureCard.vue';
import router from '@/router';

const showDialog = ref(false);

// 确认删除
const handleConfirmDelete = () => {
  console.log('执行删除逻辑');
  showDialog.value = false;
};

// 取销
const handleCancel = () => {
  console.log('取消删除');
};

const features = [
  { title: "AI 组件", description: "AI 相关组件演示", icon: "🎨", path: "/ai" },
  { title: "高级筛选", description: "高级筛选组件演示", icon: "🎨", path: "/advancedFilter" },
  { title: "轮播图", description: "轮播图组件演示", icon: "🎨", path: "/carousel" },
  { title: "卡片组件", description: "卡片组件演示", icon: "🎨", path: "/card" },
  { title: "分页组件", description: "分页组件演示", icon: "🎨", path: "/pagination" },
  { title: "二维码", description: "二维码组件演示", icon: "🎨", path: "/qrCode" },
  { title: "富文本编辑器", description: "富文本编辑器组件演示", icon: "🎨", path: "/richEditor" },
  { title: "排序码（Svg图标）", description: "排序码组件演示", icon: "🎨", path: "/sortCode" },
  { title: "导出组件", description: "导出文件组件", icon: "🎨", path: "/daoChu" },
  { title: "工具组件", description: "工具函数使用方法", icon: "🎨", path: "/allTools" },
  { title: "签字版组件", description: "签字版组件使用方法", icon: "🎨", path: "/signature" },
];

const handleFeatureClick = (path: string) => {
  router.push(path);
};
</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h1 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    font-size: 2.5rem;
  }

  p {
    text-align: center;
    margin-bottom: 30px;
    color: #666;
    font-size: $font-size-lg;
  }

  .feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
}
</style>
